<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
		<link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1322088_dfj23uc6z9o.css"/>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
		<link rel="stylesheet" type="text/css" href="js/layui/css/layui.css"/>
	</head>
	<body>
		<div class="container-fluid bg-white">
			<!-- 订单列表 -->
			<div class="order order-box">
				<div class="ood-box">
					<!-- 顶部工具条 -->
					<nav class="flex">
						<!-- 默认显示的操作栏 -->
						<div class="dutault-nav width100 flex">
							<div class="heard-left width100 flex">
								<div style="padding: 0;width: 40%;" class="col-md-4 flex"><i class="iconfont icon-riqi"></i><input type="text" class="layui-input" id="test10" placeholder=" - "></div>
								<div style="width: 10%;" class="col-md-4 padding-0 flex">
									<span class="gjss" title="点击进行高级搜索">高级搜索</span>
								</div>
							</div>
							<div class="heard-right col-md-4 padding-0 flex">
								<button type="button">导出</button>
							</div>
						</div>
					</nav>
					
					<div class="box03">
						<div>
							<div>89</div>
							<div>发货单数</div>
						</div>
						<div>
							<div>425</div>
							<div>发货商品数</div>
						</div>
						<div>
							<div>98876.98</div>
							<div>发货金额</div>
						</div>
					</div>
					<!-- 数据列表 -->
					<div class="order-list">
						<table id="order-list" lay-filter="test"></table>
					</div>
				</div>
			</div>
			
			<!-- 高级搜索弹出层 -->
			<div class="advanced-search-model hidden">
				<div class="closeSm"></div>
				<div class="sm-box gs-box">
					<form class="layui-form">
						<div class="gs-box-item">
							<div class="title">高级搜索</div>
							<div class="form-box">
								<div class="col-md-6 padding-0">
									<div class="fb-box"><span class="title">发货时间</span><input type="text" class="form-controls" id="fhTime" value="" /></div>
									<div class="fb-box"><span class="title">下单时间</span><input type="text" class="form-controls" id="xdTime" value="" /></div>
								</div>
								
								<div class="col-md-6 padding-0">
									<div class="fb-box"><span class="title">经销商</span><input type="text" class="form-controls" name="" id="" value="" /></div>
									<div class="fb-box"><span class="title">商品名称</span><input type="text" class="form-controls" name="" id="" value="" /></div>
								</div>
							</div>
						</div>
						
						<div class="footer-buttom">
							<button @click="closegjss" class="closegjss" type="button">取消</button>
							<button type="button">确定</button>
						</div>
					</form>
				</div>
			</div>
		</div>
		
		<script type="text/html" id="barDemo">
		  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="xiangqing">详情</a>
		</script>
		<script src="js/jquery-v3-3.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/layui/layui.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/new_file.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/Gather.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				var height = document.documentElement.clientHeight;
				$(".container-fluid").css({"height":(height-34)+"px"})
			})
			
			var hei = 0
			$(window).resize(function(){
				hei = document.documentElement.clientHeight;
				$(".container-fluid").css({"height":(hei-67)+"px"})
			})
			
			$(".nav-tab-box .sle-box").click(function(){
				$(this).next().slideToggle(100)
			})
			
			function closeMain(){
				$(".nav-tab-box .show-sle-box").slideToggle(100)
			}
			
			$(".nav-tab-box .show-sle-box .list-none").click(function(){
				$(".sle-box .changeSelectData").text($(this).text())
			})
			
			function showTabMain(num){
				if(num > 0){
					$(".flex .dutault-nav").addClass("hidden")
					$(".flex .caozuo-nav").removeClass("hidden")
				}else{
					$(".flex .dutault-nav").removeClass("hidden")
					$(".flex .caozuo-nav").addClass("hidden")
				}
				
				$(".changeNum").text(num)
			}
			
			
			//显示高级搜索
			$(".gjss").click(function(){
				$(".advanced-search-model").removeClass("hidden")
			})
			
			var vm = new Vue({
				el:".gs-box",
				data:{
					base64Url:"",
					checkSelcet:"汽车用品",
					showSelcet:false,
				},
				methods:{
					closegjss(){//隐藏高级搜索
						$(".advanced-search-model").addClass("hidden")
					},
					handSelect(){
						if(this.showSelcet){
							this.showSelcet = false;
						}else{
							this.showSelcet = true;
						}
					},
				}
			})
			
			layui.use(['form','table','laydate','element'], function(){
				var table = layui.table,
				laydate = layui.laydate,
				form = layui.form,
				element = layui.element
				
				//时间范围选择
				laydate.render({
					elem: '#test10',
					type: 'datetime',
					range: true,
					value:Gather.getTime().YearText+" - "+Gather.getTime().YearText,
					format:"yyyy-MM-dd HH:mm",
					max:Gather.getTime().value,
					done: function(value, date, endDate){
						console.log(value); //得到日期生成的值，如：2017-08-18
						console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
						console.log(endDate); //得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。
					}
				});
				
				//选择发货时间
				laydate.render({
					elem: '#fhTime',
					type: 'datetime',
					range: true,
					value:Gather.getTime().YearText+" - "+Gather.getTime().YearText,
					format:"yyyy-MM-dd HH:mm",
					max:Gather.getTime().value,
					done: function(value, date, endDate){
						console.log(value); //得到日期生成的值，如：2017-08-18
						console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
						console.log(endDate); //得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。
					}
				});
				
				//选择下单时间
				laydate.render({
					elem: '#xdTime',
					type: 'datetime',
					range: true,
					value:Gather.getTime().YearText+" - "+Gather.getTime().YearText,
					format:"yyyy-MM-dd HH:mm",
					max:Gather.getTime().value,
					done: function(value, date, endDate){
						console.log(value); //得到日期生成的值，如：2017-08-18
						console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
						console.log(endDate); //得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。
					}
				});
				
				//订单状态选择
				var orderList = [];
				//全选
				form.on('checkbox(c-all)', function(data){
					if(data.elem.checked){
						$(".typev").prop("checked",true)
						var item = $(".typev");
						for (var i = 0; i < item.length; i++) {
							if (item[i].checked == true) {
								orderList.push({
									id:i,
									name:item[i].value
								})
							}
						}
						form.render('checkbox');
					}else{
						$(".typev").prop("checked",false)
						form.render('checkbox');
					}
				}); 
				
				//单选
				form.on('checkbox(c-one)', function (data) {
					var item = $(".typev");
					for (var i = 0; i < item.length; i++) {
						if (item[i].checked == false) {
							$("#c_all").prop("checked", false);
							form.render('checkbox');
							break;
						}
					}
					//如果都勾选了  勾上全选
					var  all=item.length;
					for (var i = 0; i < item.length; i++) {
						if (item[i].checked == true) {
							console.log("2");
							all--;
						}
					}
					if(all==0){$("#c_all").prop("checked", true);form.render('checkbox');}
					
					//单选时取值
					if(data.elem.checked){
						orderList.push({
							id:"0",
							name:data.elem.value
						})
					}else{
						for(let i = 0;i<orderList.length;i++){
							if(orderList[i].name == data.elem.value){
								orderList.splice(i,1)
							}
						}
					}
				});

				//获取列表选中行
				table.on('checkbox()', function(obj){
					var data = table.checkStatus('order-list').data.length;
					showTabMain(data)
				});
				
				let hei = document.documentElement.clientHeight;
				
				// 数据列表渲染
				table.render({
					elem: '#order-list'
					,data:DataArray2// data为数据库查到的数据
					,height:(hei-200)
					,cols: [[//以下field字段为为数据库相同,title为字段描述
						{field:'mtype',event: 'barDemo', width:230, title:'流水号', sort: true}
						,{field:'userid', width:180, title: '订单号', sort: true}
						,{field:'pwd', width:130, title: '经销商名称', sort: true}
						,{field:'uname', width:130, title: '客户编码', sort: true}
						,{field:'sex', width: 130, title: '	商品名称'}
						,{field:'rank', width:130, title: '商品规格'}
						,{field:'exptime', width:130, title: '发货时间', sort: true}
						,{field:'money', width:130, title: '下单时间'}
						,{field:'email', width:130, title: '单位'}
						,{field:'scores', width:130, title: '订购数量'}
						,{field:'matt', width:130, title: '已发货数量'}
						,{field:'spacesta', width:130, title: '已发货商品金额'}
					]]
					,page: true
				});
				
				table.on('tool(test)', function(obj){
					if(obj.event == 'barDemo'){
						window.top.openViewPage('dd_ddxq.html')
					}else if(obj.event == "xiangqing"){
						window.top.openViewPage('dd_ddxq.html')
						window.top.setTitles('订单','订单详情')
					}
					
				})
			});
		</script>
	</body>
</html>
